<template>
  <a-card :bordered="false" title="数据库模型">
    <div slot="extra">
      <a-radio-group v-model="status" @change="onChange">
        <a-radio-button value="all">全部</a-radio-button>
        <a-radio-button value="0">待提交</a-radio-button>
        <a-radio-button value="1">待审核</a-radio-button>
        <a-radio-button value="2">已审核</a-radio-button>
        <a-radio-button value="3">已驳回</a-radio-button>
      </a-radio-group>
      <a-input-search style="margin-left: 16px; width: 272px;" />
    </div>
    <a-spin :spinning="myLoading">
      <div class="table-page-search-wrapper minMax">
        <a-tabs @change="firChange" type="card">
          <a-tab-pane v-for="s in firstPreData" :key="s.ID">
            <span slot="tab">
              {{ s.NAME }}
            </span>
            <a-tabs tab-position="top" :activeKey="activeKey" @change="subCallback" >
             
              <span slot="tab">
                <a-divider type="vertical" />
              </span>
              <a-tab-pane v-for="s in sedPreData" :key="s.id" :tab="s.name">
                <a-table
                  class="components-table-demo-nested"
                  bordered
                  ref="table" 
                  size="middle"
                  :columns="columns" 
                  :row-key="record => record.id" 
                  :data-source="data" 
                  :pagination="pagination" 
                  :scroll="{ x: 'max-content' }"
                  @change="handleTableChange">
                  <span slot="action" slot-scope="text, record">
                    <template>
                      <template v-if="record.statusId == '0' || record.statusId == '3'">
                        <a-popconfirm
                          title="是否删除该条记录?"
                          @confirm="confirm(record)"
                          @cancel="cancel"
                          okText="是"
                          cancelText="否"
                        >
                          <a href="#" >删除</a>
                        </a-popconfirm>
                        <a-divider type="vertical" />
                      </template>
                      <a @click="handleEdit(record, s.name, record.statusId)">
                                      
                        {{ record.statusId == '2' ? '查看':'编辑' }}
                      </a>
                    </template>
                  </span>
                  <span slot="status" slot-scope="text, record">
                    <template>
                      <a-tag :color="record.color" >
                        {{ text }}
                      </a-tag>
                    </template>
                  </span>
                  <ellipsis slot="mainText" slot-scope="text" :length="40" tooltip>
                    {{ text }}
                  </ellipsis>
                </a-table>
              </a-tab-pane>
            </a-tabs>
          </a-tab-pane>
          <div class="editable-add-btn" slot="tabBarExtraContent">
            <a-button-group>
              <a-button type="primary" @click="add()"> <a-icon type="plus" />添加 </a-button>
              <a-upload >
                <a-button> <a-icon type="import" />导入 </a-button>
              </a-upload>
            </a-button-group>
          </div>
        </a-tabs>
      </div>
    </a-spin>
    <performance-modal ref="modal" @ok="handleOk"></performance-modal>
    
  </a-card>
</template>

<script>
  import moment from 'moment'
  import PerformanceModal from './modules/PerformanceModal'
    import Ellipsis from '@/components/Ellipsis'
  import {
    getUrl,
    postAxiosUrl
  } from '@/api/manage'
  export default {
    components: {
      PerformanceModal,
      Ellipsis
    },
    data() {
      return {
        defaultActiveKey : '',
        activeKey : '',
        activeName : '',
        columns: [],
        firstPreData: [],
        sedPreData: [],
        data: [],
        status: 'all',
        pagination: {size:'small'},
        myLoading: false
      }
    },
    mounted() {
      this.getFirstPreData()
      
    },
    methods: {
      getFirstPreData() {
          var _this = this
          getUrl('cutFirstSetting/getWithDefaultSed', {settingType : '0'})
            .then(res => {
              _this.firstPreData = res.result.data
               _this.getSedPreData(res.result.defaultKey)
            })
        
      },
      firChange(key){
        
        this.data =[]
        this.columns = []
        
        this.getSedPreData(key)
      },
      handleOk(){
          this.pagination.current = 1
          this.getData()
      },
      add(){
        var _this = this
        this.sedPreData.some(item =>{
          if(item.id == _this.activeKey){
            _this.activeName = item.name
            return item
          }
        })       
        this.$refs.modal.add(this.activeKey,  _this.activeName)
      },
      handleEdit (record, activeName) {
          this.$refs.modal.edit(record, this.activeKey, activeName)
      },
      handleTableChange(pagination, filters, sorter) {
        console.log(pagination)
        const pager = { ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.getData({
          results: pagination.pageSize,
          page: pagination.current,
          sortField: sorter.field,
          sortOrder: sorter.order,
          ...filters,
        })
      },
      getSedPreData(parentId) {
        this.data =[]
        this.columns = []
          var _this = this
           _this.myLoading = true
          getUrl('cutSedSetting/getByParentId', {parentId : parentId})
            .then(res => {
              _this.sedPreData = res.result.data
              _this.activeKey = res.result.defaultKey
               _this.activeName = res.result.defaultName
              
              _this.getData()
            })
        
      },
      getData(params = {}) {
          var _this = this
           _this.myLoading = true
           params.settingId = this.activeKey
          getUrl('cutContent/getAll', params)
            .then(res => {
               _this.myLoading = false
              _this.data = res.result.data
              _this.columns = res.result.columns
              
              const pagination = { ...this.pagination
              }
              // Read total count from server
              pagination.total = res.result.totalCount
              pagination.showTotal = total => `共 ${total} 条`
              pagination.showQuickJumper = true
              this.pagination = pagination
              
             if(_this.columns != '' && _this.data.length > 0){
               _this.columns.push({
                    title: '操作',
                    width : 150,
                    fixed: 'right',
                    scopedSlots: { customRender: 'action' }
                  })
             }
            })
        
      },
      cancel(e) {
      },
      subCallback(key) {
        this.activeKey = key
        this.getData()
      },
      confirm (record) {
        const me = this
              postAxiosUrl('cutContent/del', {id : record.id})
                .then(res => {
                  this.pagination.current = 1
                  me.getData()
                })
      },
      onChange(e){
         this.pagination.current = 1
         this.getData({status : e.target.value})
      }
    }
  }
  
</script>
<style>
  .minMax .ant-table-tbody > tr > td {
    white-space: nowrap;
  }
  .minMax .ant-table-thead > tr > th{
    white-space: nowrap;
  }
  .minMax .ant-table-body{
    height: 540px;
  }
  .minMax .ant-table-empty  .ant-table-body{
    height: 0px;
  }
</style>